// 定义一个放大镜类 
// 表示类的函数 约定俗成 首字母大写 ；
// function Person(){
//     var obj = {}  // 省略
//     obj.name = name;  // obj 换成了this；
//     obj.age = age;
//     return obj;  // 省略了
// }

// new 运算符 ；
// 一般情况会遵循 设计原则； 单一原则 , 颗粒度小 ，灵活性强；
// 函数大 （逻辑臃肿）
// 程序不够优雅 ；
function Enlarge(showEle, bigArae, mask, listEle) {
    // 定义放大镜的属性 
    this.showEle = showEle;
    this.bigArae = bigArae;
    this.mask = mask;
    this.listEle = listEle;
    this.enterFn();
    this.leaveFn();
    this.moveFn();
    this.switchPic();
}

// 定义放大镜的方法 ；

// 鼠标移入放大区域的时候需要做的逻辑
Enlarge.prototype.enterFn = function () {
    var that = this;
    this.showEle.onmouseenter = function () {
        // 显示遮罩层
        that.mask.style.display = "block";
        that.bigArae.style.display = "block";
    }
}

// 鼠标移除的时候需要做的逻辑

Enlarge.prototype.leaveFn = function () {
    var that = this;
    this.showEle.onmouseleave = function () {
        // 显示遮罩层
        that.mask.style.display = "none";
        that.bigArae.style.display = "none";
    }
}

// 放大镜的移动方法 
Enlarge.prototype.moveFn = function () {
    // 在showEle上移动的时候遮罩层跟随鼠标移动
    var that = this;
    this.showEle.onmousemove = function (e) {
        var x = e.clientX - this.getBoundingClientRect().left - that.mask.offsetWidth / 2;
        var y = e.clientY - this.getBoundingClientRect().top - that.mask.offsetHeight / 2;

        // 限定范围
        if (x <= 0) {
            x = 0;
        }
        if (x >= this.offsetWidth - that.mask.offsetWidth) {
            x = this.offsetWidth - that.mask.offsetWidth;
        }

        if (y <= 0) {
            y = 0;
        }
        if (y >= this.offsetHeight - that.mask.offsetHeight) {
            y = this.offsetHeight - that.mask.offsetHeight;
        }

        // 遮罩层移动的时候 大图跟随移动 ；
        // x/this.offsetWidth = ?/ 背景图的宽度 

        // 获取背景图的宽和高 
        var size = getComputedStyle(that.bigArae)['background-size'];
        // console.log(size);
        var arr = size.split(" ");
        var w = parseInt(arr[0]);
        var h = parseInt(arr[1]);

        var xx = (x / this.offsetWidth) * w;  // 背景图的偏移量
        var yy = (y / this.offsetHeight) * h;

        // 设置大图背景图的偏移量为  xx 和yy
        that.bigArae.style.backgroundPosition = `-${xx}px -${yy}px`;
        // that.bigArae.style['background-position'] = ""
        // that.bigArae.style.background = "";


        that.mask.style.left = x + "px";
        that.mask.style.top = y + "px";
    }
}

// 点击切换放大图 
// var arr = ["./a.jpg","b.jpg"];
Enlarge.prototype.switchPic = function () {
    var that = this;
    var ps = this.listEle.querySelectorAll("p");
    ps.forEach(function (item,k) {
        item.onclick = function () {
            ps.forEach(function(val,kk){
                if(kk==k){
                    val.classList.add("active");
                }else{
                    val.classList.remove("active");
                }
            })

            // console.log(k);
            // 切换图像 
            that.showEle.querySelector("img").src = `./imgs/${k+1}.big.jpg`;
            that.bigArae.style.backgroundImage = `url(./imgs/${k+1}.big.jpg)`;
        }
    })
}







